<script setup lang="ts">
import { RouterView } from 'vue-router'
import { ref, onMounted } from "vue";
//获取数据大屏展示内容盒子的DOM元素
let screen = ref();
onMounted(() => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
});
//定义大屏缩放比例
function getScale(w =  2320, h = 1080) {
  const ww = window.innerWidth / w;
  const wh = window.innerHeight / h;
  return ww < wh ? ww : wh;
}
//监听视口变化
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
</script>

<template>
  <div class="screen" ref="screen">
    <RouterView />
  </div>


</template>

<style scoped lang="scss">
.screen {
  position: fixed;
  width: 2320px;
  height: 1080px;
  font-size: 16px;
  left: 50%;
  top: 50%;
  transform-origin: left top;
}
</style>
